在初步了解HTML語法後,接下來要開始針對元件進入美化(渲染),與之配合的程式語言,即為CSS。
大部分的CSS語法,都是跟視覺感官設計相關的操作,諸如著色、字體大小、粗體、元件大小、外框、排版等,除了少部分視覺效果,如排版,需要一些時間去了解,其餘如美觀設計,從語法名稱結果,直觀上相當容易理解其效果,差異只在於初學不知道有那些效果可以使用,此問題基本都可以直接詢問ChatGPT解決,或者直接到w3schools查詢,也可了解全貌。
但是當提到CSS,不得不提及的就是選擇器(selector),它是用來特定、選擇你想要美化或設計HTML中元件的語法,是學習CSS必要優先熟悉的語法。
1. 基本選擇器
基本選擇器,選擇的語法相當直觀,在初次看到,應能馬上理解該語法效果,熟悉與否差別,主要體現在選擇器的命名與管理,後面將另外討論
選擇器類型 | 語法範例 | 說明 |
---|---|---|
元件選擇器(element selector) | div |
直接以元件名稱進行選擇 |
類別選擇器(class selector) | .class |
以class進行選擇 |
ID選擇器(id selector) | #id |
以id進行選擇 |
群組選擇器(grouping selector) | div , p |
以逗號( , ),分隔各選擇器,同時選擇列舉的元件 |
2. 組合選擇器(combinator)
組合選擇器,是我一開始接觸CSS語法,直觀上最沒辦法直接了解其選擇的效果,透過多次試誤才總算發現,原來兩元件之間的空白( )竟然是一種選擇器!這種是初學者,也不知道是問題的問題,完全不覺得需要問ChatGPT,但就是花很多時間在選擇的試誤上,不如就直接列出組合選擇器的選擇效果,是最省時的學習方法。
選擇器類型 | 語法範例 | 說明 |
---|---|---|
後代組合選擇器(descendant combinator) (space) | div p |
選取所有的子層元件,會選取div 元件的子元件中(不管多少層),所有的p 元件 |
子組合選擇器(child combinator) (>) | div > p |
選取單一層子層元件,會選取div 元件的子元件中(限定第一個子層中),所有的p 元件 |
相鄰兄弟組合選擇器(next sibling combinator) (+) | div + p |
所謂的兄弟層,是指位於同階層的元件,選取同階層的元件中,相鄰其後的第一個元件 |
通用兄弟組合選擇器(subsequent-sibling combinator) (~) | div ~ p |
選取同階層的元件中,位於其後的所有元件(不限於相鄰其後的第一個) |
3. 偽類選擇器(pseudo-class)
偽類選擇器,是根據網頁使用者滑鼠的動作,以進行相對應的美化反映,增加與使用者的互動性,是相當實用的選擇方式。以單冒號( : )對元件進行後綴。
偽類選擇器 | 說明 |
---|---|
a:link |
未拜訪過的連結,第一次看到的超連結 |
a:visited |
已拜訪過的連結,經滑鼠點過後的連結 |
a:hover |
滑鼠移過去時,懸停在該元件上時 |
a:active |
滑鼠點擊當下,點擊按下的那一瞬間,即該元件受到聚焦時 |
:link
或:visited
→ :hover
→ :active
另外,就表格(<tr>
, <td>
)或清單(<li>
)元件,如果要針對特定的列、欄、條項進行選擇,以下的偽類選擇器相當好用
偽類選擇器 | 說明 |
---|---|
:first-child |
選擇父層的第一個子元件 |
:last-child |
選擇父層的最後一個子元件 |
:nth-child(n) |
分別代表選擇父層的第n個子元件 |
:nth-child(even) |
分別代表選擇父層的第偶數個子元件 |
:nth-child(odd) |
分別代表選擇父層的第奇數個子元件 |
4. 偽元件選擇器(pseudo-element)
偽元件選擇器,主要是選擇元件的特定部分,並進行美化,或者針對元件的前後插入內容,以冒號( :: )對元件進行後綴
偽元件選擇器 | 說明 |
---|---|
::first-line |
樣式化段落的第一行文字,如 p::first-line { color: red; } |
::first-letter |
樣式化段落的第一個字母,如 p::first-letter { font-size: 2em; } |
::before |
在元件前方插入內容,如 h1::before { content: '📌'; } |
::after |
在元件後方插入內容,如 h1::after { content: '✔'; } |
::marker |
樣式化<li> 的符號( • ),如 li::marker { color: blue; } |
::selection |
使用者反白選取區域的樣式,如 ::selection { background: yellow; } |